<template>
  <div class="realbox">
    <div v-if="state.dealList?.length > 0">
      <div
        class=" color_42 flex js-sp align-center family-d"
        v-for="(item, index) in state.dealList"
        :key="index"
      >
        <div class="flex js-sp align-center flex-grow-1 mtb-4">
          <div class="w_80 text-left flex-shrink-0">{{ state.time }}</div>
          <div
            :class="
              item.direction === 1
                ? 'text-red flex-grow-1 text-center'
                : 'text-green flex-grow-1 text-center'
            "
          >
            {{ $currency(item.price) }}
          </div>
          <div class="center text-right flex-grow-1">
            {{ $currency(item.number) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, watch, nextTick, computed } from "vue";
import { formatDate } from "@/utils/times.js";
import { useStore } from "vuex";

export default {
  name: "Realtime",
  props: {
    deallist: Array,
    time: Number,
  },
  setup(props) {
    const state = reactive({
      dealList: [],
      time: "",
    });
    const $store = useStore();
    const gettrading = computed(() => {
      return $store.state.exchange.stock_data;
    });
    watch(
      () => gettrading.value.id,
      (val, oldval) => {
        console.log(val, oldval);
        if (val !== oldval) {
          state.dealList = [];
        }
      }
    );
    watch(props, (val) => {
      state.dealList = state.dealList.concat(state.dealList, val.deallist);
      if (state.dealList.length > 25) {
        state.dealList.splice(0, state.dealList.length - 25);
      }
      if (props.time) {
        nextTick(() => {
          state.time = formatDate(props.time, "HH:mm:ss");
        });
      }
    });
    onMounted(() => {});

    return {
      state,
      gettrading,
    };
  },
};
</script>

<style scoped lang="less">
.realtime-data {
  height: 21px;
}
.realbox {
  overflow-y: scroll;
  padding: 10px 0px;
  height: 415px;
  &::-webkit-scrollbar {
    display: none;
  }
}
.w_80 {
  width: 80px;
}
.mtb-4 {
  padding: 4px 0px;
  margin-bottom: 2px;
}
</style>
